<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>美丽川大</title>
    <link rel="stylesheet" href="static/MDB/css/all.css">
    <link href="static/MDB/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/MDB/css/mdb.min.css" rel="stylesheet">
    <link href="static/MDB/css/style.css" rel="stylesheet">
    <link href="static/MDB/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/index.css">
    <link href="static/layer/theme/default/layer.css" rel="stylesheet">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
    <link href="static/css/people.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" />
    <link rel="shortcut icon" href="static/images/favicon.png">
</head>

<body>
    <!--Main Navigation-->
    <header>
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top">

            <!-- Additional container -->
            <div class="container">
                <img src="static/images/logo.png" width="40px" style="margin-left: -10px;">
                <img src="static/images/beautySCUword.png" class="navbar-brand" style="margin-left: 10px;width: 140px;"
                    id="navared">

                <!-- Collapse button -->
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
                    aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Collapsible content -->
                <div class="collapse navbar-collapse" id="basicExampleNav">

                    <!-- Links -->
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item" onclick="activeNav1()" id="nav1">
                            <a class="nav-link" href="#" id="navared">四时之景</a>
                        </li>
                        <li class="nav-item" onclick="activeNav2()" id="nav2">
                            <a class="nav-link" href="#studySCU" id="navared">求知川大</a>
                        </li>
                        <li class="nav-item" onclick="activeNav3()" id="nav3">
                            <a class="nav-link" href="#sportSCU" id="navared">活力川大</a>
                        </li>
                        <li class="nav-item" onclick="activeNav4()" id="nav4">
                            <a class="nav-link" href="#happySCU" id="navared">欢乐川大</a>
                        </li>
                        <li class="nav-item" onclick="activeNav4()" id="nav5">
                            <a class="nav-link" href="#achievementSCU" id="navared">成就川大</a>
                        </li>
                        <li class="nav-item" onclick="activeNav5()" id="nav6">
                            <a class="nav-link" href="#commentBlock" id="navared">留言</a>
                        </li>
                    </ul>
                    <!-- Links -->
                </div>
                <audio src="static/music/index.mp3" autoplay="autoplay" controls id="music"></audio>
                <!-- Collapsible content -->
            </div>
            <!-- Additional container -->
        </nav>

        <div id="spring" class="view" style="display: none;">
            <div class="mask  rgba-green-light" id="springMask">
                <div class="container-fluid d-flex align-items-center justify-content-center h-100">
                    <div class="row d-flex justify-content-center text-center">
                        <div class="col-md-12">
                            <!-- Heading -->
                            <img src="static/images/springword.png"
                                style="width: 80px;text-align:center;display: inline-block;">
                            <!-- Divider -->
                            <hr class="hr-light">
                            <!-- Description -->
                            <p class="white-text my-4" style="font-size: 25px;">竹外桃花三两枝，<br>春江水暖鸭先知。</p>
                            <button type="button" class="btn btn-outline-white" onclick="clearSpring()">探 春</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="summer" class="view" style="display: none;">
            <div class="mask rgba-pink-light" id="summerMask">
                <div class="container-fluid d-flex align-items-center justify-content-center h-100">
                    <div class="row d-flex justify-content-center text-center">
                        <div class="col-md-12">
                            <!-- Heading -->
                            <img src="static/images/summerword.png"
                                style="width: 80px;text-align:center;display: inline-block;">
                            <!-- Divider -->
                            <hr class="hr-light">
                            <!-- Description -->
                            <p class="white-text my-4" style="font-size: 25px;">接天莲叶无穷碧，<br>映日荷花别样红。</p>
                            <button type="button" class="btn btn-outline-white" onclick="clearSummer()">遇 夏</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="autumn" class="view" style="display: none;">
            <div class="mask  rgba-yellow-light" id="autumnMask">
                <div class="container-fluid d-flex align-items-center justify-content-center h-100">
                    <div class="row d-flex justify-content-center text-center">
                        <div class="col-md-12">
                            <!-- Heading -->
                            <img src="static/images/autumnword.png"
                                style="width: 80px;text-align:center;display: inline-block;">
                            <!-- Divider -->
                            <hr class="hr-light">
                            <!-- Description -->
                            <p class="white-text my-4" style="font-size: 25px;">落霞与孤鹜齐飞，<br>秋水共长天一色。</p>
                            <button type="button" class="btn btn-outline-white" onclick="clearAutumn()">知 秋</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="winter" class="view" style="display: none;">
            <div class="mask rgba-grey-light" id="winterMask">
                <div class="container-fluid d-flex align-items-center justify-content-center h-100">
                    <div class="row d-flex justify-content-center text-center">
                        <div class="col-md-12">
                            <!-- Heading -->
                            <img src="static/images/winterword.png"
                                style="width: 80px;text-align:center;display: inline-block;">
                            <!-- Divider -->
                            <hr class="hr-light">
                            <!-- Description -->
                            <p class="white-text my-4" style="font-size: 25px;">荷尽已无擎雨盖，<br>菊残犹有傲霜枝。</p>
                            <button type="button" class="btn btn-outline-white" onclick="clearWinter()">藏 冬</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="" id="catDiv">
            <img src="static/images/cat.gif" id="cat" onclick="changeSeason()">
        </div>
    </header>
    <!--Main Navigation-->

    <!--Main layout-->
    <main>
        <div class="container-fluid" style="height: 900px;" id="studySCU">
            <div class="d-flex row" style="height: 900px;">
                <div class="col-6" style="padding: 0;height: 900px;">
                    <img id="page2_sec_pic1" class="page2_sec_pic" src="static/images/study/page2-2.jpg" />
                    <img id="page2_sec_pic2" class="page2_sec_pic" src="static/images/study/page2-3.jpg" />
                    <img id="page2_sec_pic3" class="page2_sec_pic" src="static/images/study/page2-4.jpg" />
                    <img id="page2_sec_pic4" class="page2_sec_pic" src="static/images/study/page2-1.jpg" />
                    <img id="page2_main_pic1" class="page2_main_pic" src="static/images/study/page2-1.jpg" />
                    <img id="page2_main_pic2" class="page2_main_pic" src="static/images/study/page2-2.jpg" />
                    <img id="page2_main_pic3" class="page2_main_pic" src="static/images/study/page2-3.jpg" />
                    <img id="page2_main_pic4" class="page2_main_pic" src="static/images/study/page2-4.jpg" />
                </div>

                <div class="col-6" style="padding: 0;">
                    <img src="static/images/paw.gif" style="position: absolute;right: 0;top: 0;width: 20%;">
                    <!-- <div class="row" style="height: 160px;width: 50%;"></div> -->
                    <div class=text-center>
                        <table style="height: 900px">
                            <tbody>
                                <tr>
                                    <td class="align-middle">
                                        <div>
                                            <img src="static/images/paragraph1.png" style="width: 55%;">
                                        </div>
                                        <br>
                                        <br>
                                        <div>
                                            <button type="button" class="btn btn-white" onclick="learnPage()"
                                                style="font-weight: bold;font-size: larger;">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                                                    fill="currentColor" style="color: #ba2a17;margin-right: 20px;"
                                                    viewBox="0 0 16 16">
                                                    <path
                                                        d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
                                                </svg>领 袖 群
                                                英</button>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                                                fill="currentColor"
                                                style="cursor:pointer;color: black;margin-right: 50px;margin-left: 190px;"
                                                viewBox="0 0 16 16" onclick="change_page2_pic_front()">
                                                <path
                                                    d="M3.86 8.753l5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z" />
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                                                fill="currentColor" style="color: black;cursor:pointer;"
                                                viewBox="0 0 16 16" onclick="change_page2_pic_next()">
                                                <path
                                                    d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
                                            </svg>
                                        </div>
                                        <div
                                            style="width: 50px;height: 250px;color: #ba2a17;background-color: #ba2a17;position: absolute;right: 0;top: 62%;">
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                    <div class="align-bottom" style="height: auto;position: absolute;bottom: 0;z-index: -1;">
                        <img style=" width: 100%;height: auto;" src="static/images/study/page2-5-1.png" />
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="height: 900px;" id="sportSCU">
            <div class="d-flex row" style="height: 900px;">
                <div class="col-6" style="padding: 0;">
                    <div style="height: 323.5px;" class="text-center">
                        <div class="row" style="height: 170px;width: 50%;"></div>
                        <div class="text-center" style="color: #ba2a17;">
                            <h1 style=" font-weight: bolder;font-size: 2.3vw;">TIME AND TIDE WAIT NO MAN</h1>
                        </div>
                        <div>
                            <img src="static/images/words.png"
                                style="width: 76%;position: absolute;left: 50px;bottom: 62%;z-index: -1;">
                        </div>
                        <!-- 美丽川大logo -->
                        <div id="redSqure">
                            <img src="static/images/sport/redSquare.png"
                                style="width: 16%;height: auto;position: absolute;right: 0;bottom: 64%;z-index: 1;">
                            <img src="static/images/cat1.gif"
                                style="width: 500px;height: auto;position: absolute;right: -200px;top: 10px;z-index: 2;">
                        </div>
                    </div>
                    <img style=" width: 100%;height: 576.5px;z-index: 99;" src="static/images/sport/望江体育馆2.jpg" />
                </div>
                <div class="col-6" style="padding: 0;height: 900px;">
                    <div class="align-top" style="height: auto;position: absolute;top: 0;">
                        <img style=" width: 100%;height: 323.5px;;" src="static/images/study/page2-5-2.png" />
                    </div>
                    <div
                        style="height: 576.5px;width: 100%;background-color: #ba2a17;padding: 0;position: absolute;bottom: 0;">
                        <div class="text-center" style="color: white;">
                            <table style="height: 576.5px;">
                                <tbody>
                                    <tr>
                                        <td class="align-middle">
                                            <div>
                                                <img src="static/images/paragraph3.png" style="width: 55%;">
                                            </div>
                                            <br>
                                            <br>
                                            <div>
                                                <button type="button" class="btn btn-danger"
                                                    style="font-weight: bold;font-size: larger;margin-left: 35%;color: black;"
                                                    onclick="sportPage()">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                                                        fill="currentColor" style="color: white;margin-right: 20px;"
                                                        viewBox="0 0 16 16">
                                                        <path
                                                            d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
                                                    </svg>文 教 奋 武</button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="height: 900px;background-color: #f1efef;" id="happySCU">
            <div class="d-flex row" style="height: 900px;">
                <div class="col-4 text-center" style="padding: 0;margin-left: 6%;">
                    <p style="font-size: 60px;font-weight:normal;font-family: 'Impact';position: absolute;top: 10%;">WE
                        ARE FULL OF ENERGY!</p>
                    <div style="margin-top: 40%;">
                        <div>
                            <img src="static/images/paragraph2.png" style="width: 100%;">
                        </div>
                        <div style="margin-top: 15%;margin-left: 65%;">
                            <button type="button" class="btn" onclick="happyPage()"
                                style="font-weight: bold;font-size: larger;background-color: #f1efef;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                                    style="color: #ba2a17;margin-right: 20px;" viewBox="0 0 16 16">
                                    <path
                                        d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
                                </svg>锵 锵 鸣 凤</button>
                        </div>
                    </div>

                </div>
                <div id="itemlist" class="col-3" style="padding: 0;margin-right: 400px;margin-top: 5%;">
                    <img src="static/images/entertainment/index1.jpg" id="busby" />
                    <img src="static/images/entertainment/index2.jpg" id="gridly" />
                    <img src="static/images/entertainment/index3.jpg" id="reco" />
                    <img src="static/images/entertainment/index4.jpg" id="theblog" />
                </div>
            </div>
        </div>
        <div class="container-fluid" style="height: 900px;" id="achievementSCU">
            <div class="d-flex row" style="height: 900px;">
                <div style="margin-left: 3%;margin-top: 2%;">
                    <img src="static/images/paragraph4.png" style="width: 40%;margin-top: 3%;">
                </div>
                <div class="swiper-container-solution">
                    <div class="selected-solution">
                        <div style="position: absolute;right: 10%;">
                            <div class="swiper-container">
                                <div class="solution-cardlist swiper-wrapper">
                                    <div class="col-sm-4 swiper-slide">
                                        <div class="solution-card">
                                            <img src="static/images/achievement/李言荣.jpg" width="100%">
                                            <h3>李言荣</h3>
                                            <p>博士，教授，中国工程院院士。现任四川大学校长、党委副书记。中国工程院院士，第十三届全国政协委员。
                                            </p>
                                            <span>
                                                <a href="http://scu.edu.cn/info/1632/11753.htm"><span class="arrow-more">关于他</span><span
                                                        class="arrow-f"></span></a>
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 swiper-slide">
                                        <div class="solution-card">
                                            <img src="static/images/achievement/江姐.jpg" width="100%">
                                            <h3>江姐</h3>
                                            <p>中国共产党地下时期重庆地区组织的重要人物，为中国共产党追认的女烈士，牺牲时年仅29岁。</p>
                                            <span>
                                                <a href="https://baike.baidu.com/item/%E6%B1%9F%E7%AB%B9%E7%AD%A0/1973654?fromtitle=%E6%B1%9F%E5%A7%90&fromid=750&fr=aladdin"><span class="arrow-more">关于她</span><span
                                                        class="arrow-f"></span></a>
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 swiper-slide">
                                        <div class="solution-card">
                                            <img src="static/images/achievement/吴玉章.jpg" width="100%">
                                            <h3>吴玉章</h3>
                                            <p>我国杰出的无产阶级革命家、教育家、历史学家和语言文字学家、新中国高等教育的开拓者。</p>
                                            <span>
                                                <a href="https://baike.baidu.com/item/%E5%90%B4%E7%8E%89%E7%AB%A0/2221?fr=aladdin"><span class="arrow-more">关于他</span><span
                                                        class="arrow-f"></span></a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 swiper-slide">
                                        <div class="solution-card">
                                            <img src="static/images/achievement/饺子.jpg" width="100%">
                                            <h3>饺子</h3>
                                            <p>中国内地动画导演、编剧、制作人，凭借《哪吒之魔童降世》获第11届中国电影导演协会2019年度表彰大会年度导演提名，第35届大众电影百花奖最佳编剧奖。</p>
                                            <span>
                                                <a href="https://baike.baidu.com/item/%E9%A5%BA%E5%AD%90/23621816#viewPageContent"><span class="arrow-more">关于他</span><span
                                                        class="arrow-f"></span></a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 swiper-slide">
                                        <div class="solution-card">
                                            <img src="static/images/achievement/王小丫.jpg" width="100%">
                                            <h3>王小丫</h3>
                                            <p>中国内地女主持人，2000年主持益智答题类节目《开心辞典》。2005年获得“2004中国十大经济女性年度人物”称号。2007年，获得中央电视台十佳节目主持人称号。</p>
                                            <span>
                                                <a href="https://baike.baidu.com/item/%E7%8E%8B%E5%B0%8F%E4%B8%AB/148893?fr=aladdin"><span class="arrow-more">关于她</span><span
                                                        class="arrow-f"></span></a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 swiper-slide">
                                        <div class="solution-card">
                                            <img src="static/images/achievement/流沙河.jpg" width="100%">
                                            <h3>流沙河</h3>
                                            <p>中国现代诗人、作家、学者、书法家。主要作品有《流沙河诗集》《故园别》《游踪》《台湾诗人十二家》《隔海谈诗》《台湾中年诗人十二家》《流沙河诗话》《锯齿啮痕录》《庄子现代版》《流沙河随笔》《Y先生语录》《流沙河短文》《流沙河近作》等。</p>
                                            <span>
                                                <a href="https://baike.baidu.com/item/%E6%B5%81%E6%B2%99%E6%B2%B3/3708?fr=aladdin"><span class="arrow-more">关于他</span><span
                                                        class="arrow-f"></span></a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 swiper-slide">
                                        <div class="solution-card">
                                            <img src="static/images/achievement/莫怀戚.jpg" width="100%">
                                            <h3>莫怀戚</h3>
                                            <p>当代作家。中国作家协会会员，重庆作家协会副主席。小说《诗礼人家》曾获“四川文学”奖，著有《莫怀戚中短篇小说选》，其作品《散步》被选入初二语文课本。</p>
                                            <span>
                                                <a href="https://baike.baidu.com/item/%E8%8E%AB%E6%80%80%E6%88%9A/1130741?fr=aladdin"><span class="arrow-more">关于他</span><span
                                                        class="arrow-f"></span></a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 swiper-slide">
                                        <div class="solution-card">
                                            <img src="static/images/achievement/巴金.jpg" width="100%">
                                            <h3>巴金</h3>
                                            <p>中国当代作家，代表作有《雾》、《雨》、《电》。</p>
                                            <span>
                                                <a href="https://baike.baidu.com/item/%E5%B7%B4%E9%87%91/114319?fr=aladdin"><span class="arrow-more">关于他</span><span
                                                        class="arrow-f"></span></a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 swiper-slide">
                                        <div class="solution-card">
                                            <img src="static/images/achievement/郭沫若.jpg" width="100%">
                                            <h3>郭沫若</h3>
                                            <p>中国现代作家、历史学家、考古学家。代表作有《星空》、《王昭君》、《屈原》、《蔡文姬》、《李白与杜甫》。担任文联主席、中央研究院院士。</p>
                                            <span>
                                                <a href="https://baike.baidu.com/item/%E9%83%AD%E6%B2%AB%E8%8B%A5/119453?fr=aladdin"><span class="arrow-more">关于他</span><span
                                                        class="arrow-f"></span></a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 swiper-slide">
                                        <div class="solution-card">
                                            <img src="static/images/achievement/张澜.jpg" width="100%">
                                            <h3>张澜</h3>
                                            <p>著名的民主主义革命家、教育家，国家德高望重的领导人之一，中国民主同盟的创建者和领导者，发起中国民主政团同盟并任同盟主席。担任全国政协副主席、全国人大常委会副委员长、中央人民政府副主席。</p>
                                            <span>
                                                <a href="https://baike.baidu.com/item/%E5%BC%A0%E6%BE%9C/568105?fr=aladdin"><span class="arrow-more">关于他</span><span
                                                        class="arrow-f"></span></a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-pagination solution-pagination"></div>
                            </div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                </div>
                <div style="height: 57%;width:100%;z-index: -1;margin-top: 7.7%;" id="page5color">
                </div>
                <img src="static/images/cat2.gif"
                    style="width: 200px;height: auto;position: absolute;right: 20px;margin-top: 13%;">
            </div>
        </div>
        <div class="container-fluid">
            <div class="d-flex row" id="commentBlock">
                <img src="static/images/leaf1.png" id="leaf1"
                    style="width: 18%;height:auto;z-index: 1;position: absolute;left: 28%;margin-top: 26.5%;">
                <img src="static/images/leaf2.png" id="leaf2"
                    style="width: 19.2%;height:auto;z-index: 2;position: absolute;left: 41.4%;margin-top: 27.6%;">
                <img src="static/images/leaf3.png" id="leaf3"
                    style="width: 26.4%;height:auto;z-index: 3;position: absolute;left: 46.4%;margin-top: 14%;">
                <img src="static/images/leaf4.png" id="leaf4"
                    style="width: 21.4%;height:auto;z-index: 4;position: absolute;left: 75%;margin-top: 22%;">
                <img src="static/images/leaf5.png" id="leaf5"
                    style="width: 17.8%;height:auto;z-index: 1;position: absolute;left: 6%;margin-top: 23%;">
                <div id="userComment1"
                    style="width: 16%;height:auto;z-index: 1;position: absolute;left: 27.5%;margin-top: 33%;transform:rotate(320deg);word-break: break-all;font-size: 0.75vw;">
                </div>
                <div id="userComment2"
                    style="width: 16%;height:auto;z-index: 1;position: absolute;left: 44.3%;margin-top: 35%;transform:rotate(30deg);word-break: break-all;z-index: 5;font-size: 0.75vw;">
                </div>
                <div id="userComment3"
                    style="width: 18%;height:auto;z-index: 1;position: absolute;left: 49%;margin-top: 19%;transform:rotate(345deg);word-break: break-all;z-index: 5;font-size: 0.75vw;">
                </div>
                <div id="userComment4"
                    style="width: 15%;height:auto;z-index: 1;position: absolute;left: 82.5%;margin-top: 28.5%;transform:rotate(49deg);word-break: break-all;z-index: 5;font-size: 0.75vw;">
                </div>
                <div id="userComment5"
                    style="width: 13.5%;height:auto;z-index: 1;position: absolute;left: 10%;margin-top: 28%;transform:rotate(35deg);word-break: break-all;z-index: 5;font-size: 0.75vw;">
                </div>
            </div>
            <div class="d-flex row  align-items-center justify-content-center mt-2">
                <div id="layerpage"></div>
            </div>
        </div>
    </main>
    <footer class="page-footer font-small pt-4" style="background: #ba2a17;">
        <div class="container-fluid text-center text-md-left" >
            <div class="row">
                <div class="col-md-2 mb-4">
                    <img src="static/images/beautySCUword.png" class="navbar-brand" style="margin-left: 10%;width: 60%;"
                    id="navared">
                    <img src="static/images/logo.png" width="23%">
                    
                </div>
                <div class="col-md-1 mb-4"></div>
                <div class="col-md-1 mb-4">闵  海</div>
                <div class="col-md-1 mb-4">吉天昊</div>
                <div class="col-md-1 mb-4">解思雨</div>
                <div class="col-md-1 mb-4">张新悦</div>
                <div class="col-md-4 mb-4">
                    <form class="input-group" action="/postComments" method="post" enctype="multipart/form-data"
                    id="commentSub">
                        <input type="text" class="form-control form-control-sm" placeholder="请不要超过80字"
                            aria-label="Your Comment" aria-describedby="basic-addon2" name="content">
                        <input value="page1" name="page" style="display: none;">
                        <div class="input-group-append">
                            <input type="button" class="btn btn-sm btn-outline-white my-0"
                                            value="留言" onclick="submitForm();">
                        </div>
                    </form>
                </div>
                <hr style="height:3px;color: #f1efef;width: 66%;margin-top: 0px;position: absolute;right: 9%;margin-top: 2%;" />
                <div class="col-md-3"></div>
                <div class="col-md-6" >
                    <p style="margin-top: -3%;">岷山峨峨，江水泱泱，隽美川大，巍然一方。</p>
                </div>
            </div>
        </div>
        <div class="footer-copyright text-center py-3 mt-3">© 2020 Copyright:
            <a href="#">BestSCU</a>
        </div>
    </footer>
    <script type="text/javascript" src="static/MDB/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/MDB/js/popper.min.js"></script>
    <script type="text/javascript" src="static/MDB/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="static/MDB/js/mdb.min.js"></script>
    <script src="static/js/jquery.backstretch.js" type="text/javascript"></script>
    <script src="static/js/jquery-form.js" type="text/javascript"></script>
    <script src="static/layui/layui.js"></script>
    <script src="static/layui/lay/modules/laypage.js"></script>
    <script src="static/js/index.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>